<template>
  <ul class="app-menus">
    <el-popover
      v-for="(item, index) in routes"
      :key="index"
      placement="right"
      :width="200"
      trigger="click"
      effect="dark"
      ref="popoverRef"
      :offset="25"
      popper-class="app-menus-list"
    >
      <template #reference>
        <li class="app-menus-item">
          <img :src="downloadFile" alt="" />
          <span>{{ item.meta.title }}</span>
        </li>
      </template>
      <ul class="app-menus-children">
        <li
          class="app-menus-children-item"
          v-for="item1 in item.children"
          @click="onClickMenu(item, item1, index)"
        >
          <img :src="getImg('img/icon/' + item1.meta.icon + '.png')" alt="" />
          <span>
            {{ item1.meta.title }}
          </span>
        </li>
      </ul>
    </el-popover>
  </ul>
</template>

<script setup lang="ts">
import { routes } from '@renderer/router/index'
import downloadFile from '@renderer/assets/img/tools/download-file.png'
import { getImg } from '@renderer/utils/index'
const router = useRouter()
const popoverRef = ref<any>(null)
const onClickMenu = (item, item1, i) => {
  if (popoverRef.value && popoverRef.value[i]) {
    popoverRef.value[i].hide()
  }

  let path = item.path != '/' ? item.path + '/' + item1.path : item.path + item1.path
  router.push(path)
}
</script>

<style lang="scss" scoped>
.app-menus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  &-children-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
  }
  &-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    height: 30px;
    width: 30px;
    position: relative;
    div {
      position: absolute;
      font-weight: bolder;
      font-size: 18px;
      top: -2px;
      color: white;
    }
    img {
      height: 20px;
      transition: all 0.5s ease-in-out;
    }
    span {
      font-size: 12px;
      white-space: nowrap;
    }
  }
}
</style>
